<template>
  <div class="meas-container">
    <div>
      <el-button :icon="Search" plain type="primary" @click="openQuery">
        查询
      </el-button>
      <el-button :icon="Plus" plain type="primary" @click="toAdd">
        添加
      </el-button>
      <el-button :icon="Delete" plain type="warning" @click="toDelete">
        删除
      </el-button>
      <el-button :icon="Edit" plain type="primary" @click="toUpdate">
        修改
      </el-button>
      <el-button :icon="Edit" plain type="primary" @click="fpInvCl">
        存货分类分配
      </el-button>
      <el-button :icon="Edit" plain type="primary" @click="fpInv">
        存货编码分配
      </el-button>
    </div>
    <div style="height: 20px"></div>
    <el-table
      :data="state.barcodeRuleData"
      highlight-current-row="true"
      size="small"
      style="width: 100%"
      @current-change="handleCurrentChange"
    >
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column label="规则编码" prop="barcodeRuleCode" width="150" />
      <el-table-column label="规则名称" prop="barcodeRuleName" width="170" />
      <el-table-column
        label="规则描述"
        prop="barcodeRuleDescribe"
        width="300"
      />
      <el-table-column label="备注" prop="remark" />
    </el-table>
    <el-pagination
      background
      :current-page="paginationParams.pageNo"
      :layout="layout"
      :page-size="paginationParams.pageSize"
      small
      :total="paginationParams.total"
      @current-change="handlePaginationCurrentChange"
      @size-change="handlePaginationSizeChange"
    />
    <QueryDialogVue ref="queryDialogRef" @query-callback="queryCallback" />
    <BcrModuleVue ref="bcrModuleRef" @success-callback="getBatchCodeRuleData" />
    <InvSelectVue ref="invSelectRef" @selected-callback="invSelectCallback" />
    <TabsListVue ref="tabsListRef" style="margin-top: 20px" />
  </div>
</template>

<script setup>
  import { getBarcodeRulePageApi } from '@/api/kc/barcode_rule'
  import { Plus, Delete, Edit, Search } from '@element-plus/icons-vue'
  import QueryDialogVue from './modules/queryDialog.vue'
  import BcrModuleVue from './modules/bcrModule.vue'
  import InvSelectVue from '@/plugins/InventorySelector/invSelect.vue'
  import TabsListVue from './modules/TabsList.vue'
  import { localStorageConfig } from '@/config/localstorage.config'
  const $baseMessage = inject('$baseMessage')

  const queryDialogRef = ref()
  const bcrModuleRef = ref()
  const invSelectRef = ref()
  const tabsListRef = ref()
  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)
  const state = reactive({
    barcodeRuleData: [],
    barcodeRuleFpData: [],
    meadocs: [],
    currentRow: {},
    queryInfo: {},
  })

  const openQuery = () => {
    queryDialogRef.value.openDialog()
  }
  const queryCallback = (query) => {
    state.queryInfo = query
    getBatchCodeRuleData()
  }

  const fpInv = () => {
    invSelectRef.value.handleOpen({ isComsume: 1 }, 0)
  }
  const invSelectCallback = (inv, type) => {
    console.log(inv)
    console.log(type)
  }

  const toAdd = () => {
    bcrModuleRef.value.openDialog()
  }
  const toUpdate = () => {
    bcrModuleRef.value.openDialog(state.currentRow)
  }

  const toDelete = async () => {
    if (state.currentRow.pkMeasdoc) {
      ElMessageBox.confirm('确定要删除该计量单位吗?', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const res = await removeMeasdocApi({
            pkMeasdoc: state.currentRow.pkMeasdoc,
          })
          if (res && String(res.code) === '2000') {
            $baseMessage(res && res.msg ? res.msg : '操作成功', 'success')
            getBatchCodeRuleData()
          } else {
            $baseMessage(res && res.msg ? res.msg : '操作失败,请重试', 'error')
          }
        })
        .catch(() => {})
    } else {
      $baseMessage('请选择需要删除的计量单位', 'warning')
    }
  }

  const paginationParams = reactive({
    pageNo: 1,
    pageSize: 20,
    total: 0,
  })
  const getBatchCodeRuleData = async () => {
    var params = {
      pageSize: paginationParams.pageSize,
      pageNum: paginationParams.pageNo,
      pkCorp: pkCorp,
      barcodeRuleCode: state.queryInfo.barcodeRuleCode,
      barcodeRuleName: state.queryInfo.barcodeRuleName,
      barcodeRuleDescribe: state.queryInfo.barcodeRuleDescribe,
    }
    const { code, data } = await getBarcodeRulePageApi(params)

    if (code === 2000) {
      state.barcodeRuleData = data.list
      paginationParams.total = data.total
    }
  }

  const handleCurrentChange = (row) => {
    state.currentRow = row
    if (row) {
      tabsListRef.value.getRow(row)
    }
  }

  const layout = ref('->, total, sizes, prev, pager, next, jumper')
  const handlePaginationCurrentChange = (...args) => {
    paginationParams.pageNo = args[0] ? args[0] : 1
  }
  const handlePaginationSizeChange = (...args) => {
    paginationParams.pageSize = args[0] ? args[0] : 20
    paginationParams.pageNo = 1
  }

  watch(paginationParams, () => {
    getBatchCodeRuleData()
  })

  onMounted(async () => await getBatchCodeRuleData())
</script>

<style scoped></style>
